import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import {
  Card,
  Form,
  Table,
  Divider,
  Row,
  Col,
  Select,
  Button,
  Input,
  DatePicker,
  Popover,
  Radio,
  InputNumber,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { Link } from 'dva/router';
import moment from 'moment';
import { getParamUrl, baseUri } from '../../utils/formatDataSource';
@connect(({ teacherMg3, classInfo3, loading }) => ({
  teacherMg:teacherMg3,
  classInfo:classInfo3,
  loading: loading.models.tag,
}))
@Form.create()
class TeacherMg extends PureComponent {
  state = {
    checkVisible: false,
    selectedRowKeys: [],
    selectedRows: [],
    updateDateFrom: '',
    updateDateTo: '',
    wordName: '',
    type: null,
    pageNo: 1,
    subjectList: [],
    campusList: [],
    lessonChecks: [],
    currentLesson: {},
    defaultDateRange: [],
    queryDateFrom: moment(new Date())
      .subtract('month', 1)
      .startOf('month')
      .toDate(),
    queryDateTo: moment(new Date())
      .subtract('month', 1)
      .endOf('month')
      .toDate(),
    teacherList: [],
    currentRecord: {},
  };
  componentDidMount() {
    this.initLoad();
  }
  initLoad = () => {
    const { dispatch } = this.props;
    var params = { pageNo: 1 };
    this.loadData(params);
    dispatch({
      type: 'classInfo3/getSubjectList',
    }).then(() => {
      this.setState({
        subjectList: this.props.classInfo.subjectList,
      });
    });
    dispatch({
      type: 'teacherMg/getCampusList',
    }).then(() => {
      this.setState({
        campusList: this.props.teacherMg.campusList,
      });
    });
  };
  searchByParam = () => {
    const { queryDateFrom, queryDateTo, campusId, subject } = this.state;
    const { form } = this.props;
    const params = {};
    if (queryDateFrom !== '') {
      params.dateFrom = queryDateFrom;
    }
    if (queryDateTo !== '') {
      params.dateTo = queryDateTo;
    }
    if (campusId) {
      params.campusId = campusId;
    }
    if (subject) {
      params.subject = subject;
    }
    console.log(params);
    params.teacherName = form.getFieldValue('teacherName');
    this.loadData(params);
  };
  pageSearch = params => {
    const { queryDateFrom, queryDateTo, campusId, subject } = this.state;
    const { form } = this.props;
    params.lessonDateFrom = queryDateFrom;
    params.lessonDateTo = queryDateTo;
    params.teacherName = form.getFieldValue('teacherName');
    params.campusId = campusId;
    params.subject = subject;
    this.loadData(params);
  };
  loadData = params => {
    const { dispatch } = this.props;
    dispatch({
      type: 'teacherMg/getTeacherClassTimeDetail',
      payload: params,
    }).then(() => {
      this.setState({
        teacherList: this.props.teacherMg.teacherList,
      });
    });
    dispatch({
      type: 'teacherMg/getTeacherManageTotalInfo',
      payload: params,
    });
  };

  campusSelect = e => {
    this.setState({
      campusId: e,
    });
  };

  subjectSelect = e => {
    this.setState({
      subject: e,
    });
  };
  getColumns = () => {
    return [
      {
        title: 'Id',
        dataIndex: 'id',
        key: 'id',
        align: 'center',
      },
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
      },
      {
        title: '科目',
        dataIndex: 'subjectName',
        key: 'subjectName',
        align: 'center',
      },
      {
        title: '普通班课',
        dataIndex: 'time1',
        key: 'time1',
        align: 'center',
      },
      {
        title: '1V2班课',
        dataIndex: 'time2',
        key: 'time2',
        align: 'center',
      },
      {
        title: '1V3班课',
        dataIndex: 'time3',
        key: 'time3',
        align: 'center',
      },
      {
        title: 'A类1对1',
        dataIndex: 'time4',
        key: 'time4',
        align: 'center',
      },
      {
        title: 'B类1对1',
        dataIndex: 'time5',
        key: 'time5',
        align: 'center',
      },
      {
        title: 'C类1对1',
        dataIndex: 'time6',
        key: 'time6',
        align: 'center',
      },
      {
        title: 'D类1对1',
        dataIndex: 'time7',
        key: 'time7',
        align: 'center',
      },
      {
        title: '操作',
        key: 'action',
        align: 'center',
        render: record => {
          return (
            <span>
              <a
                href={
                  baseUri + `/teach/manage/lesson/exportTeacherClassTime?teacherId=${record.id}`
                }
              >
                导出
              </a>
            </span>
          );
        },
      },
    ];
  };

  checkSizeChange = e => {
    this.setState({ currentCheckSize: e });
  };
  tablePageChange = pageNo => {
    this.setState({
      pageNo: pageNo,
    });
    var param = {};
    param.pageNo = pageNo;
    this.pageSearch(param);
  };
  selectDateChange = (date, dateString) => {
    this.setState({
      queryDateFrom: date[0].toDate(),
      queryDateTo: date[1].toDate(),
    });
  };
  getTotalColumns = () => {
    return [
      {
        title: '上课老师数',
        dataIndex: 'goToClassTeacherCount',
        align: 'center',
        key: 'goToClassTeacherCount',
      },
      {
        title: '开课班级数',
        dataIndex: 'openClassCount',
        align: 'center',
        key: 'openClassCount',
      },
      {
        title: '上课学生数',
        dataIndex: 'goToClassStudentCount',
        align: 'center',
        key: 'goToClassStudentCount',
      },
      {
        title: '新增学生数',
        dataIndex: 'increaseStudentCount',
        align: 'center',
        key: 'increaseStudentCount',
      },
      {
        title: '总课时',
        dataIndex: 'total',
        align: 'center',
        key: 'total',
      },
      {
        title: '普通班课',
        dataIndex: 'time1',
        align: 'center',
        key: 'time1',
      },
      {
        title: '1V2班课',
        dataIndex: 'time2',
        align: 'center',
        key: 'time2',
      },
      {
        title: '1V3班课',
        dataIndex: 'time3',
        align: 'center',
        key: 'time3',
      },
      {
        title: 'A类1对1',
        dataIndex: 'time4',
        align: 'center',
        key: 'time4',
      },
      {
        title: 'B类1对1',
        dataIndex: 'time5',
        align: 'center',
        key: 'time5',
      },
      {
        title: 'C类1对1',
        dataIndex: 'time6',
        align: 'center',
        key: 'time6',
      },
      {
        title: 'D类1对1',
        dataIndex: 'time7',
        align: 'center',
        key: 'time7',
      },
    ];
  };

  render() {
    const Option = Select.Option;
    const { RangePicker } = DatePicker;
    const FormItem = Form.Item;
    const { teacherList, teacherManageStatistic } = this.props.teacherMg;
    const { campusList } = this.state;
    const { subjectList } = this.props.classInfo;
    const { getFieldDecorator } = this.props.form;
    return (
      <PageHeaderLayout>
        <Card bordered={false}>
          <Form span={24} layout="inline" onSubmit={this.searchByParam}>
            <FormItem label="科目">
              <Select defaultValue="" style={{ width: 100 }} onSelect={this.subjectSelect}>
                <Option value="">全部</Option>
                {subjectList.map((item, index) => {
                  return (
                    <Option key={index} value={item.code}>
                      {item.msg}{' '}
                    </Option>
                  );
                })}
              </Select>
            </FormItem>
            <FormItem label="统计时间">
              <RangePicker
                defaultValue={[
                  moment(new Date())
                    .subtract('month', 1)
                    .startOf('month'),
                  moment(new Date())
                    .subtract('month', 1)
                    .endOf('month'),
                ]}
                span={12}
                onChange={this.selectDateChange}
              />
            </FormItem>
            <FormItem>
              {getFieldDecorator('teacherName')(<Input placeholder="请输入老师名称" />)}
            </FormItem>
            <FormItem label="校区">
              <Select defaultValue="" style={{ width: 100 }} onSelect={this.campusSelect}>
                <Option value="">全部</Option>
                {campusList.map((item, index) => {
                  return (
                    <Option key={index} value={item.id}>
                      {item.name}
                    </Option>
                  );
                })}
              </Select>
            </FormItem>
            <FormItem span={4}>
              <Button type="primary" htmlType="submit">
                查询
              </Button>
            </FormItem>
          </Form>
        </Card>
        <Card>
          <Table
            pagination={false}
            dataSource={[
              {
                goToClassTeacherCount: teacherManageStatistic.goToClassTeacherCount,
                goToClassStudentCount: teacherManageStatistic.goToClassStudentCount,
                openClassCount: teacherManageStatistic.openClassCount,
                increaseStudentCount: teacherManageStatistic.increaseStudentCount,
                total: teacherManageStatistic.total,
                time1: teacherManageStatistic.time1,
                time2: teacherManageStatistic.time2,
                time3: teacherManageStatistic.time3,
                time4: teacherManageStatistic.time4,
                time5: teacherManageStatistic.time5,
                time6: teacherManageStatistic.time6,
                time7: teacherManageStatistic.time7,
              },
            ]}
            columns={this.getTotalColumns()}
            scroll={{ x: 1200 }}
          />
        </Card>
        <Row>
          <Col span={8} offset={10}>
            <Button href={baseUri + `/teach/manage/lesson/exportTeacherClassTime`}>导出</Button>
          </Col>
        </Row>
        <Table
          dataSource={teacherList.list}
          columns={this.getColumns()}
          pagination={{
            onChange: this.tablePageChange,
            current: this.state.pageNo,
            size: 10,
            total: teacherList.total,
            showTotal() {
              return (
                <span>
                  共 <a style={{ color: '#1893ab' }}>{teacherList.total}</a> 位
                </span>
              );
            },
          }}
        />
      </PageHeaderLayout>
    );
  }
}

export default TeacherMg;
